<template>
  <div class="lists">
    <div class="time">
        <el-time-picker
        v-model="value1"
        :picker-options="{
        selectableRange: '18:30:00 - 20:30:00'
        }"
        placeholder="任意时间点">
        </el-time-picker>   
        <el-time-picker
            arrow-control
            v-model="value2"
            :picker-options="{
            selectableRange: '18:30:00 - 20:30:00'
            }"
            placeholder="任意时间点">
        </el-time-picker>
        <span>搜索</span>
        <el-input v-model="input" placeholder="请输入收货人姓名" style="width:200px" @input="search()"></el-input>
    </div>

    <div class="table">
      <el-table :data="tableData" style="width: 100%" border stripe height='550'>
        <el-table-column prop="id" label="订单编号" width="180">
        </el-table-column>
        <el-table-column prop="time" label="提交时间" width="180">
        </el-table-column>
        <el-table-column prop="user" label="用户账号"  width="140"> </el-table-column>
        <el-table-column prop="name" label="收货人"  width="80"> </el-table-column>
        <el-table-column prop="price" label="订单金额"  width="80"> </el-table-column>
        <el-table-column prop="statu" label="订单状态"  width="80"> </el-table-column>
        <el-table-column prop="autoTime" label="自动确认收货时间"  width="80"></el-table-column>
        <el-table-column prop="date" label="订单应收货时间"  width="150"> </el-table-column>
        <el-table-column prop="" label="操作"  width="180" ><div  class="btns"><el-button size="mini">查看订单</el-button ><el-button size="mini">确认收货</el-button></div></el-table-column>
      </el-table>
    </div>
  </div>
</template>

    <script>

    import axios from "axios"
export default {
    data() {
        return {
            tableData:[],
            value1: new Date(2016, 9, 10, 18, 40),
            value2: new Date(2016, 9, 10, 18, 40),
            input:''
        };
    },
    methods:{
        getList(){
            axios.post('/api/list').then(resp=>{
                this.tableData=resp.data.data
            })
        },
        search(){
            axios.post('/api/search',({value:this.input})).then(resp=>{
                console.log(resp.data)
                this.tableData=resp.data.newdata
            })
        }
    },
    created(){
        this.getList()
    }
};
</script>

<style lang="scss" scoped>
    .btns{
        display: flex;
        justify-content: center;
    }
    .time{
        display: flex;
        height: 50px;
        justify-content: start;
        align-items: center;
        span{
            flex-shrink: 0;
            font-size: 18px;
            padding: 0 12px;
        }
    }
</style>